<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D旋转</title>
	</head>
	<body>
		<div class="stage">
			<div id="box">
				<div class="kind b1">1</div>
				<div class="kind b2">2</div>
				<div class="kind b3">3</div>
				<div class="kind b4">4</div>
				<div class="kind b5">5</div>
				<div class="kind b6">6</div>
			</div>
		</div>
	</body>
</html>
<style>
	.stage{
		perspective: 1600px;
		position: relative;
		left: 500px;
		top 100px;
	}
	#box{
		width: 400px;
		height: 400px;
		transform-style: preserve-3d;
		animation: rotate-box 20s;
		animation-iteration-count: infinite;
	}
	.kind{
		width: 200px;
		height: 200px;
		text-align: center;
		line-height: 200px;
		font-size: 50px;
		color: white;
		position: absolute;
		left: 200px;
		top: 200px;
	}
	.b1{
		background: rgba(0,255,255,0.6);
		transform: rotateX(-90deg);
		transform-origin: bottom;
	}
	.b2{
		background-color: rgba(127,255,0,0.6);
		transform: rotateX(90deg);
		transform-origin: top;
	}
	.b3{
		background-color: rgba(205,200,177,0.6);
		transform: rotateY(90deg);
		transform-origin: right;
	}
	.b4{
		background-color: rgba(255,182,193,0.6);
		transform: rotateY(-90deg);
		transform-origin: left;
	}
	.b5{
		background-color: rgba(159,121,238,0.6);
		transform: translateZ(0);
	}
	.b6{
		background-color: rgba(138,43,226,0.6);
		transform: translateZ(200px);
	}
	@keyframes rotate-box{
		0%{
			transform: rotateX(0deg) rotateY(0deg);
		}
		10%{
			transform: rotateX(0deg) rotateY(180deg);
		}
		20%{
			transform: rotateX(-180deg) rotateY(180deg);
		}
		30%{
			transform: rotateX(-360deg) rotateY(180deg);
		}
		40%{
			transform: rotateX(-360deg) rotateY(360deg);
		}
		50%{
			transform: rotateX(-180deg) rotateY(360deg);
		}
		60%{
			transform: rotateX(90deg) rotateY(180deg);
		}
		70%{
			transform: rotateX(0deg) rotateY(180deg);
		}
		80%{
			transform: rotateX(90deg) rotateY(90deg);
		}
		90%{
			transform: rotateX(90deg) rotateY(0deg);
		}
		100%{
			transform: rotateX(0deg) rotateY(0deg);
		}
	}
</style>
<script language="JavaScript" type="text/javascript">
	var a=1;
	label1: for(var i=1;i<=9;i++){
		document.write("<br>")
		for(var j=1;j<=9;j++){
			if(j>i){
				continue label1;
			}
			document.write(i+"×"+j+"+"+i*j+"&nbsp; ");
		}
	}
</script>